<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-16">
        <!-- .prevent 示例 -->
        <form action="https://www.baidu.com">
            <!-- 此处不加 .prevent ,网页会跳转到 https://www.baidu.com -->
            <button type="submit" class="btn btn-success" @click.prevent="test">修改</button>
        </form>
        <!-- .stop 示例 .self 示例：只能点击自己触发 -->
        <div style="width: 200px; height: 200px; background: red;" @click.self="outside">
            <div style="width: 100px; height: 100px; background: yellow;" @click="inside">
                <!-- 此处加了 .stop , 网页的外层 div  父标签不会触发 -->
                <button @click.stop="itself">test stop 修饰符</button>
            </div>
        </div>
        <!-- .once 示例：test()方法只执行一次， -->
        <form action="https://www.baidu.com">
            <!-- 加了 .prevent，第一次点击执行 test(),默认跳转被阻止, 第二次点击按钮，直接跳转， test()不执行 -->
            <button type="submit" class="btn btn-success" @click.prevent.once="test">修改</button>
        </form>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app-16',
            data: {},
            methods: {
                test: function (event) {
                    alert("--test");
                },
                inside: function () {
                    alert("--inside");
                },
                outside: function () {
                    alert("--outside");
                },
                itself: function () {
                    alert("--itself");
                }
            }
        })
    </script>
</body>
</html>